/**
 * @Description: 颜色选择器
 * @Author: skj
 */
import React, {Component} from "react";
import {View, StyleSheet, FlatList} from "react-native";
import PropTypes from "prop-types";
import NavigationBar from "../navigation/navigation-bar.view";
import ColorItemCell from "./views/color-cell.view";
import routerModule from "@greens/onion/src/router";

export default class ColorSelectorPage extends Component {
	constructor(props) {
		super(props);
		this.datasource = [
			{id: 1, name: '黑色', image: require('./images/buycars-chooseBlack.png'), titleColor: '#ffffff'},
			{id: 5, name: '白色', image: require('./images/buycars-chooseWhite.png'), titleColor: '#333333'},
			{id: 14, name: '银灰色', image: require('./images/buycars-chooseGray.png'), titleColor: '#333333'},
			{id: 0, name: '红色', image: require('./images/buycars-chooseRed.png'), titleColor: '#ffffff'},
			{id: 2, name: '蓝色', image: require('./images/buycars-chooseBlue.png'), titleColor: '#ffffff'},
			{id: 15, name: '棕褐色', image: require('./images/buycars-chooseBrown.png'), titleColor: '#ffffff'},
			{id: 7, name: '金色', image: require('./images/buycars-chooseGold.png'), titleColor: '#ffffff'},
			{id: 10, name: '橙色', image: require('./images/buycars-chooseOrange.png'), titleColor: '#ffffff'},
			{id: 3, name: '黄色', image: require('./images/buycars-chooseYellow.png'), titleColor: '#ffffff'},
			{id: 8, name: '紫色', image: require('./images/buycars-choosePurple.png'), titleColor: '#ffffff'},
			{id: 4, name: '绿色', image: require('./images/buycars-chooseGreen.png'), titleColor: '#ffffff'},
			{id: -1, name: '其他', image: require('./images/buycars-chooseNone.png'), titleColor: '#333333'}]
	}


	//属性传参
	static propTypes = {};
	//默认属性
	static defaultProps = {};

	componentDidMount() {
	}

	renderItem = ({item}) => {
		return <ColorItemCell
			image={item.image}
			title={item.name}
			titleColor={item.titleColor}
			onPress={() => {
				routerModule.setResult({name:item.name,id:item.id})
				routerModule.goBack();
			}}
		/>
	}

	render() {
		return (
			<View style={styles.container}>
				<NavigationBar title={'选择颜色'}/>
				<FlatList
					keyExtractor={(item) => item.id}
					data={this.datasource}
					renderItem={this.renderItem}
					ListHeaderComponent={() => {
						return (<View style={{height: 15, backgroundColor: '#ffffff'}}/>);
					}}
					ListFooterComponent={() => {
						return (<View style={{height: 15, backgroundColor: '#ffffff'}}/>);
					}}
					ItemSeparatorComponent={() => {
						return (<View style={{height: 15, backgroundColor: '#ffffff'}}/>);
					}}
					numColumns={2}
				/>
			</View>
		);
	}
}
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#f2f2f2',
		flex: 1,
	}
});